<template>
    <el-container>
      <el-header>
        <el-breadcrumb separator="/">
              <el-breadcrumb-item>系统管理</el-breadcrumb-item>
              <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        </el-breadcrumb>
      </el-header>
      <el-main >

              <!--查询表单-->
              <el-form  :inline="true" class="demo-form-inline" label-width="80px">
                <el-form-item label="用户">
                  <el-input></el-input>
                </el-form-item>
                <el-form-item label="手机">
                  <el-input></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="success" icon="el-icon-search" >查询</el-button>
                  <el-button type="success" icon="el-icon-edit" @click="addUser">新增</el-button>
                </el-form-item>
              </el-form>

              <!--表格组件-->
              <el-table :data="list" style="width: 100%;" border>
                <el-table-column  label="编号" prop="id" width="100px" ></el-table-column>
                <el-table-column label="姓名" prop="name" width="100px" ></el-table-column>
                <el-table-column label="年龄" prop="age" width="300px" ></el-table-column>
                <el-table-column label="手机" prop="phone" width="200px" ></el-table-column>
                <el-table-column label="操作" width="500px" >
                  <template slot-scope="scope">
                        <el-button type="info" icon="el-icon-search" size="mini">查看</el-button>
                        <el-button type="warning" icon="el-icon-edit" size="mini">修改</el-button>
                        <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
        <!--分页组件-->
        <!--@size-change 下来框选中每页条数触发的事件   -->
        <!--@current-change 鼠标点击页码触发的事件-->
        <!--current-page.sync 翻页后当前页码数，高亮显示-->
        <!--page-sizes 下来框显示的每页条数-->
        <!--page-size 每页显示条数-->
        <!--layout 设置分页组件中各个元素显示位置-->
         <!--total 总条数-->
            <el-pagination
              @size-change="selectRow"
              @current-change="selectPage"
              :current-page.sync="page"
              :page-sizes="[5,10,20]"
              :page-size="5"
              :total="20"
              layout="total,prev, pager, next, jumper,sizes"
            >

            </el-pagination>

           <!--对话框组件-->
          <el-dialog title="新增用户" :visible.sync="isShow" width="30%">
                    <el-form label-width="80px">
                          <el-form-item label="用户名:"><el-input></el-input></el-form-item>
                          <el-form-item label="年龄:"><el-input></el-input></el-form-item>
                          <el-form-item label="手机:"><el-input></el-input></el-form-item>
                          <el-form-item >
                            <el-button type="success" icon="el-icon-plus" size="mini">保存</el-button>
                          </el-form-item>
                    </el-form>
          </el-dialog>

      </el-main>
    </el-container>

</template>

<script>
    export default {
        name: "AdminUserInfo",
        data(){
           return{
                isShow:false,
                page:1,
                list:[
                    {"id":"1","name":"李四1","age":23,"phone":"15008277444"},
                    {"id":"2","name":"李四2","age":21,"phone":"15008277424"},
                    {"id":"3","name":"李四3","age":24,"phone":"14008277444"},
                    {"id":"4","name":"李四4","age":26,"phone":"16008277444"},
                    {"id":"5","name":"李四5","age":23,"phone":"18008277444"},
                ]
           }
        },
        methods:{
          addUser(){
            this.isShow = true;
          },
          selectRow(row){
            console.log("选中每天显示条数"+row);
          },
          selectPage(page){
            console.log("当前页码"+page);
          }

        }
    }
</script>

<style scoped>

</style>
